<template>
  <div>
    <div class="divcolor">
      <el-color-picker v-model="color" @change="changescolor" />
      <div v-for="(item, index) in colors" :index="index">
        <span
          :style="{ background: item.color }"
          class="spanColor"
          @click="obtaincolor(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Colors',
  props: ['editcolor'],
  data() {
    return {
      colors: [
        { color: 'red' },
        { color: '#F5B556' },
        { color: '#43DAE6' },
        { color: '#4390E6' },
        { color: '#7B43E6' },
        { color: '#E643CF' },
        { color: '#E64373' }
      ],
      color: ''
    }
  },
  watch: {
    editcolor: {
      immediate: true,
      handler(val) {
        this.color = val
      }
    }
  },
  created() {
    this.getDicts('sys_color').then(response => {
      console.log(response)
      response.data.forEach((element, i) => {
        this.colors[i].color = element.dictValue
      })
      console.log(this.colors)
    })
  },
  methods: {
    obtaincolor(val) {
      console.log(val)
      this.color = val.color
      this.$emit('obcolor', this.color)
    },
    changescolor(val) {
      console.log(val)
      this.color = val
      this.$emit('obcolor', this.color)
    }
  }
}
</script>

<style scoped>
::v-deep .el-color-picker__trigger {
  padding: 0;
  width: 30px;
  height: 30px;
}
.divcolor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 180px;
  grid-template-rows: 1fr 1fr;
}
.spanColor {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
